<template>
  <view class="collection_container app_container_page">
    <view class="tab">
      <view class="tab1" :class="code == 1 ? 'active' : ''" @click="activeChange(1)">视频</view>
      <view class="tab1" :class="code == 2 ? 'active' : ''" @click="activeChange(2)">门店</view>
      <view :class="code == 3 ? 'active' : ''" @click="activeChange(3)">报告</view>
    </view>
    <!-- 视频 -->
    <pullRefreshView v-show="code === 1" class="pullRefreshVideoView" ref="pullRefreshVideoView" :resFn="resHandleFn" :fetchFn="fetchVideoList">
      <template v-slot:default="{ list }">
        <appVideoListCard v-for="video in list" :key="video.id" :video="video" @VIDEOLIST_CARD_CLICK="toVideoDetail" class="collectionCard" />
      </template>
    </pullRefreshView>
    <!-- 门店 -->
    <pullRefreshView v-show="code === 2" class="pullRefreshShopView" ref="pullRefreshShopView" :fetchFn="fetchShopList">
      <template v-slot:default="{ list }">
        <appMycollectionShopCard v-for="collection in list" :key="collection.id" :collection="collection" @CollectionShop_CARD_CLICK="toShopDetail" class="collectionCard" />
      </template>
    </pullRefreshView>
    <pullRefreshView v-show="code === 3" class="pullRefreshReportView" ref="pullRefreshReportView" :fetchFn="fetchReportList">
      <template v-slot:default="{ list }">
        <appReportItem v-for="item of list" :item="item" :key="item.reportId" @REPORT_ITEM_CLICK="handleItemClick" />
      </template>
    </pullRefreshView>
  </view>
</template>

<script>
import { myCollect } from '@/api/user.js'
import pullRefreshView from '@/components/app/pull-refresh-view.vue'
import appVideoListCard from '@/components/app/app_videoList_card'
import appMycollectionShopCard from '@/components/app/app_collectionShop_card'
import appReportItem from '@/components/app/app_report_item'
export default {
  components: {
    pullRefreshView,
    appMycollectionShopCard,
    appVideoListCard,
    appReportItem
  },
  data() {
    return {
      code: 1
    }
  },
  methods: {
    activeChange(val) {
      this.code = val
    },
    fetchVideoList(params) {
      return myCollect({
        ...params,
        product_type: 1
      })
    },
    fetchShopList(params) {
      return myCollect({
        ...params,
        product_type: 2
      })
    },
    fetchReportList(params) {
      return myCollect({
        ...params,
        product_type: 3
      })
    },
    toVideoDetail(val) {
      uni.navigateTo({
        url: '/pages/videoDetail/index?id=' + val.id
      })
    },
    toShopDetail(val) {
      uni.navigateTo({
        url: '/pages/shop/shopDetail?id=' + val.id
      })
    },
    handleItemClick(item) {
      uni.navigateTo({
        url: `/pagesSub/report/detail?id=${item.reportId}`
      })
    }
  },
  onPullDownRefresh() {
    this.$refs[this.code === 1 ? 'pullRefreshVideoView' : this.code === 2 ? 'pullRefreshShopView' : 'pullRefreshReportView'].fetchList(true).then(() => {
      uni.stopPullDownRefresh()
    })
  },
  onReachBottom() {
    this.$refs[this.code === 1 ? 'pullRefreshVideoView' : this.code === 2 ? 'pullRefreshShopView' : 'pullRefreshReportView'].fetchList()
  }
}
</script>

<style lang="scss">
.collection_container {
  padding: 100rpx 30rpx 0 30rpx;
  .tab {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }
  app-mycollection-shop-card ~ app-mycollection-shop-card {
    margin-top: 30rpx;
  }
  app-video-list-card ~ app-video-list-card {
    margin-top: 30rpx;
  }
}
</style>
